<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
 	String path = request.getContextPath();
 	request.setAttribute("path", path);
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
	content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword"
	content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,jQuery,CSS,HTML,RWD,Dashboard">
<link rel="shortcut icon" href="${path}/img/favicon.png">

<title>CoreUI - Open Source Bootstrap Admin Template</title>

<!-- Icons -->
<link href="${path}/css/font-awesome.min.css" rel="stylesheet">
<link href="${path}/css/simple-line-icons.css" rel="stylesheet">

<!-- Main styles for this application -->
<link href="${path}/css/styles.css" rel="stylesheet">
<link href="${path}/css/bootstraps.min.css" rel="stylesheet">

<!-- ================================================== -->
<!-- ================================================== -->
<!-- ================================================== -->

<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>

<script type="text/javascript">
    
		function myUpdate(id){
/* 				alert(id); */
				$(".modal-body").load("${path}/auth/sysrole/detail","id="+id);
		
			 /* $(".update").slideToggle();  */
		/* 				var url = "${path}/auth/sysrole/detail?id="+id;
				window.open(url,"userdetail"); */
		}
		
		function roleFunc(roleId){
			$(".modal-roleFunc").load("${path}/auth/role/findByRoleid","roleId="+roleId);
		}
    
	    $(function(){
	    	var tbodys=document.getElementById('sysinfos');
	    	var subTb=tbodys.childNodes;
	  
	    	if(subTb.length<=1){
	    		document.getElementById('nextPage').style.display="none";
	    		document.getElementById('prevPage').style.display="none";
	    			
	    	}
	    	
	    	var input = $('#pageNum');
	    	$(".pagination li").click(function(){
	    		var v=this.value;
	    		if(v==0){
	    			alert("faile");
	    			return;
	    		}
/* 	    		alert(v); */
	    		input.val(v);
	    		$('#formIndex').submit();
	    	});
	    	
	    	$("input[name=checkAll]").click(function(){
	    		if($(this).prop("checked")==true){
	                  $("input[name=checkSelect]").prop("checked","true");
	           		}else{
	                 $("input[name=checkSelect]").prop("checked","");
	             }
	              
	          });
	    });
	    
    	function roleauth(){
			var checkedNum=$("input[name=checkSelect]:checked").length;
			if(checkedNum==0){
				$(".modal-roleauth").html("至少选择一项！");
			}else{
				var checkedList=new Array();
				$("input[name=checkSelect]:checked").each(function(){
					alert($(this).val());
					checkedList.push($(this).val());
				});
				$(".modal-roleauth").load("${path}/auth/role/showadd","delitems="+checkedList.toString());
			}

    	}
	    
		   function delCheck(){
		    	var checkedNum=$("input[name=checkSelect]:checked").length;
				if(checkedNum==0){
					alert("至少选择一项");
				}
				var checkedList=new Array();
				$("input[name=checkSelect]:checked").each(function(){
					//alert($(this).val());
					checkedList.push($(this).val());
				});
				$.ajax({
					type:"get",
					url:"${path}/auth/sysrole/del",
					dataType:"json",
					data:"delitems="+checkedList.toString(),
					success:function(data){
						/* alert("OK"); */
						window.location.href="${path}/auth/sysrole/page";
					}, 
					error:function(){
						window.location.href="${path}/auth/sysrole/page";
					}
				});
				
		    }
		  function search(){
	    		$("#pageNum").val(1);
	    		$('#formIndex').submit();
	    	}
		  
		  function addSys(){
			  var name=$("#names").val();
			  var chnName=$("#chnNames").val();
			  alert(name);
			  alert(chnName);
			  if(name=='' || chnName==''){
				  alert("请输入必填项");
				  return
			  }
			  $("#addSysForm").submit();
			  
		  }
	    	
	    	/* function goPage(pageNum){
	    		$("#pageNum").val(pageNum);
	    		$('#roleSearchForm').submit();
	    	} */
	    	
    </script>
<style type="text/css">
#right {
	width: 75%;
	height: 500px;
	float: left;
	position: relative;
}

#context {
	position: absolute;
	top: 30px;
}

#context .roleNav {
	margin-bottom: 30px;
}

#context .roleNav ul {
	width: 100%;
	height: 30px;
}

#context .roleNav ul li {
	width: 125px;
	height: 30px;
	float: left;
	list-style: none;
}

#context .roleNav a {
	text-decoration: none;
}

.search {
	width: 600px;
	margin-left: 220px;
	margin-top: 30px;
}


#context table {
	width: 100%;
	height: auto;
	display: block;
	background-color: #CCCCCC;
}

#context table tr {
	width: 100%;
	height: auto;
	display: block;
}

#context table td, #context table th {
	width: 120px;
	height: 50px;
	float: left;
	display: block;
	text-align: center;
	font-size: 14px;
}

#context .rolePageNum input {
	width: 30px;
	height: 15px;
}

.poster {
	display: none;
	width: 350px;
	height: auto;
	background-color: #E5E5E5;
	position: fixed;
	top: 130px;
	left: 0px;
	right: 60px;
	bottom: 0px;
	margin-top: 78px;
	margin-left: 350px;
	border: 1px solid gray;
}

.poster label {
	width: 150px;
	height: 15px;
	text-align: right;
}

.poster h3 {
	text-align: center;
}

.poster input {
	width: 150px;
	display: inline-block;
}

.poster div {
	width: 350px;
	height: 50px;
}

.poster .button input {
	border-radius: 50px;
	width: 120px;
	display: inline-block;
	text-align: center;
	margin-left: 100px;
}

.add {
	width: 100px;
	margin-left: 130px;
	border-radius: 20px;
}

.del {
	width: 100px;
	margin-left: 60px;
	border-radius: 20px;
}

.leven {
	width: 100px;
	/*     		margin-left: 60px; */
	border-radius: 20px;
}

/* .show {
	width: 100px;
	margin-left: 180px;
	border-radius: 20px;
} */

.buttonclore {
	width: 600px;
	margin-left: 150px;
}

.buttonclore li {
	/* width:400px; */
	list-style: none;
	float: right;
	margin-right: 50px;
	display: inline-block;
	border: 1px solid grey;
}

.modal-update {
	position: relative;
	padding: 15px
}
</style>
</head>
<body
	class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">

	<!-- 头部 -->
	<%@ include file="/share/header.jsp"%>
	<div class="app-body">
	<!-- 权限管理 -->
	<%@ include file="/share/sidebar.jsp"%>

	<!-- Main content -->
	<main class="main"> <!-- ！按钮================================ -->
	<!-- ！按钮================================ --> <!-- ！按钮================================ -->
	<!-- ！按钮================================ --> <!-- ！按钮================================ -->
	<div class="container-fluid">
		<div class="animated fadeIn">
			<div class="row">

				<div class="col-md-6">

					<div class="buttonclore">
						<!-- Secondary, outline button -->
						<ul>
							<!-- <li><input type="button" class="btn btn-outline-primary"
								value="权限配置" onclick="roleauth();"></li> -->
							<!-- <form action="javaScript:void(0)" method="get">
								<li><input type="button" class="btn btn-outline-secondary"
									onclick="delCheck();" value="删除角色"></li>
							</form> -->
							<!-- <li><input type="button" class="btn btn-outline-success"
								data-toggle="modal" data-target="#exampleModal"
								data-whatever="@mdo" value="添加" /></li> -->
								
							<!-- <li><input type="button" class="btn btn-outline-success"
								value="角色集" onclick="search();"></li> -->
						</ul>

					</div>
					<div class="search">
						<form id="formIndex" action="${path}/auth/sysrole/page"
							method="get">
							<label>角色名称：</label> <%-- <input type="text" name="name" value="${sysroleVo.name}" /> --%>
							<input type="text" list="car" name="name">
								<datalist id="car"> 
									<c:forEach var="t" items="${sysroleInfos}">
										<option value=${t.name }></option>
									</c:forEach>
								 </datalist>
							 <input type="hidden" id="pageNum" name="pageNum" value="${sysroleVo.pageNum}" />
							<!-- <input type="submit" value="查询"/> -->
							<input type="button" value="查询" class="btn btn-outline-success"
								onclick="search()" />
						</form>
					</div>
				</div>
			</div>


			<%-- 	<div id="right">
		<div id="context">
			<div class="roleNav">
				<ul>
					<li><input type="button" class="leven" value="权限配置"></li>
					<form action="javaScript:void(0)" method="get">
						<li><input type="button" class="del" value="删除" onclick="del();"/></li>
					</form>				
					<!-- <li><a href="javaScript:void(0)" onclick="del();">删除</a></li> -->
					<li><input type="button" class="add" value="新增" id="cl"/></li>
					<!-- <li><a href="#" id="ul">修改</a></li> -->
				</ul>
			</div>
			
			<div class="search">
			<form id="staffSearchForm" action="${path}/auth/staff/findByStaff" method="post">
				<label>用户名称：</label>
				<input type="text" name="chnName"/>
				<label>英文名：</label>
				<input type="text" name="surName"/>
				
				<input type="hidden" id="pageNum" name="pageNum" value="1"/> 
				<input type="button" value="查询" onclick="search()"/>
			</form>
			</div>
		</div>
	</div>	
 --%>
			<div id="fluid" class="container-fluid">
				<div class="animated fadeIn">
					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="card-header">
									<i class="fa fa-align-justify"></i> Combined All Table
									<input type="button" class="btn btn-outline-success"
									data-toggle="modal" data-target="#exampleModal"
									data-whatever="@mdo" value="添加" />
									<input type="button" class="btn btn-outline-success"
								value="角色集" onclick="search();"/>
									<input type="button" class="btn btn-outline-primary" data-toggle="modal" 
							data-target="#exampleModal3" data-whatever="@mdo"
								value="权限配置" onclick="roleauth();">
								
								</div>
								<div class="card-block">
									<table
										class="table table-bordered table-striped table-condensed">
										<thead>
											<tr>
												<th><input type="checkBox" name="checkAll" />
													<input type="button" class="btn btn-outline-secondary"
													onclick="delCheck();" value="删除角色">
												</th>
												<th>序号</th>
												<th>角色名称</th>
												<!-- <th>使用状态</th> -->
												<th>创建时间</th>
												<!-- <th>是否允许分配角色</th> -->
												<th>操作</th>
											</tr>
										</thead>

										<tbody id="sysinfos">
											<c:forEach var="sysroleList" items="${sysroleInfos}"
												varStatus="status">
												<tr>
													<td><input type="checkBox" name="checkSelect" value="${sysroleList.roleId}" /></td>
													<td>${status.index+1}</td>
													<td>${sysroleList.name}</td>
													<%-- <td>${sysroleList.deleteFlag}</td> --%>
													<td>${sysroleList.createDateStr}</td>
													<%-- <td>${sysroleList.mangerroleFlag}</td> --%>
													<td><input type="button" class="btn btn-primary"
														data-toggle="modal" data-target="#exampleModal2"
														data-whatever="@mdo" value="修改"
														onclick="myUpdate('${sysroleList.roleId}')">
														<input type="button" class="btn btn-outline-primary" data-toggle="modal" 
														data-target="#exampleModal5" data-whatever="@mdo"
															value="查看" onclick="roleFunc('${sysroleList.roleId}');">
														</td>
												
												</tr>
											</c:forEach>
										</tbody>

									</table>
									<nav>
									<ul class="pagination">

										<li id="prevPage" value="${queryByPage.prePage}" class="page-item"><a class="page-link"
										href="javascript:void(0)">上一页</a></li> 
										<c:forEach var="p" items="${queryByPage.navigatepageNums}" varStatus="status">
										<li value="${p}" class="page-item active"><a class="page-link" href="javascript:void(0)">${p}</a>
										</li>
										</c:forEach> 
										
										<li id="nextPage" value="${queryByPage.nextPage}" class="page-item"><a class="page-link"
										href="javascript:void(0)">下一页</a></li> 
									</ul>
									</nav>
								</div>
							</div>
						</div>
						<!--/.col-->
					</div>
				</div>
			</div>
	</main>
	</div>
	<div>
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">角色添加</h4>
					</div>
					<div class="modal-update">
						<form id="addSysForm" action="${path}/auth/sysrole/add" method="post">
						
							<!-- <div class="form-group">
								<label for="roleId" class="control-label">角色编号</label> <input
									type="text" class="form-control" name="roleId" id="roleId" />
							</div> -->
							<div class="form-group">
								<label for="names" class="control-label">角色名称：</label> <input
									type="text" class="form-control" name="name" id="names" placeholder="(必填项)"/>
							</div>
							<div class="form-group">
								<label for="chnNames" class="control-label">姓名：</label> <input
									type="text" class="form-control" name="chnName" id="chnNames" placeholder="(必填项)"/>
							</div>
<!-- 							<div class="form-group">
								<label for="deleteFlag" class="control-label">使用状态：</label> <input
									type="text" class="form-control" name="deleteFlag" id="deleteFlag" />
							</div>
							<div class="form-group">
								<label for="mangerroleFlag" class="control-label">是否允许分配角色：</label> <input
									type="text" class="form-control" name="mangerroleFlag" id="mangerroleFlag" />
							</div> -->
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<input type="button" class="btn btn-primary" value="新增" onclick="addSys();"/>
						</form>
					</div>
				</div>
			</div>



			</div>
		</div>
		
	<div>
		<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">角色修改</h4>
					</div>
					<div class="modal-body"></div>
				</div>
			</div>
		</div>

	</div>
				<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">权限配置</h4>
					</div>
					<div class="modal-roleauth"> xxx</div>
				</div>
			</div>
		</div>

					<div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">角色权限</h4>
					</div>
					<div class="modal-roleFunc"> </div>
				</div>
			</div>
		</div>

</body>
</html>